<!-- 
  版本问题：
    vue2技术栈：vue2 + vue-router3 + vuex3
    vue3技术栈：vue3 + vue-router4 + vuex4/pinia2

  vuex（插件）:
    之前：讲9大组件通信
    vuex: 把项目中非常非常普遍使用的状态放到集中仓库中，用的话，直接从仓库中获取。也可以通过一个流程，修改仓库中的状态，这个叫走流程。

    vuex的作用：1）集中状态管理，目的是组件间数据共享。 2）做数据缓存（缓存到内存中了） 

    如何学习vuex? 核心：一张图。要求会画，会说，会写。 五个概念。四个map方法。

  vuex的使用步骤：
    1）安装vuex，cnpm i vuex@3  需要指定版本
      注册vuex  Vue.use(Vuex)
    2）创建一个store实例  let store = new Vuex({})
    3）在main.js中挂载store，子子孙孙都可以使用仓库了
    4）在组件中通过this.$store或四个map方法就可以使用仓库中的数据 或 走流程。

  五个概念：
    export default new Vuex.Store({
      // 组件共享的状态，具有响应式，组件中通过this.$store.state来访问这些状态。
      state: {
      },
      // 根据已有的state，计算出新的状态，类似于组件中的计算属性。
      // 当state发生变化，会自动重新计算，在组件中使用this.$store.getters来访问它们。
      getters: {
      },
      // mutations是专门用来修改状态的，是修改状态的唯一途经，本质是一个函数，function fn(state,payload)
      // 在组件中，可以直接commit一个mutation，当commit一个mutation时，可以传参。
      // $store.commit('mutations方法',payload)
      // 一个mutations中，不能写异步代码
      mutations: {
      },
      // actions中可以放异步代码，在项目中用的最多的就是发送ajax请求。
      // actions不能直接操作状态，action要操作状态，必须通过mutation。
      // 在组件中通过this.$store.dispatch('actions方法', payload)。可以去派发一个action。
      // 走流程：在组件中通过diapatch派发一个action，在action中写异步代码，如ajax，得到结果后，需要commit一个mutation。状态发生了变化，vuex中的状态是响应式的，状态发生了变化，模板要重新渲染。
      actions: {
      },
      // 在真实开发中，一个项目中有非常多的共享的状态，拆分成子store.大家在拆分子store务必在子store中使用namespaced:true开启命名空间。
      // modules中就可以合并子store
      modules: {
      }
    })

  四个map方法: 映射的目的是为了方便快速使用状态或走流程。
    mapState/mapGetters: 把仓库中的状态或getters，映射组件的计算属性。
    mapActions/mapMutaions: 把仓库中的mutation和actions映射成组件方法。


  几个原则：
    1）在真实开发中，一般都会拆分子store
    2）需要在子store中开启命名空间  namespaced:true
    3）在组件中尽量不要使用$store，建议使用map*方法。


  面试题：
    1）说一下vuex是什么，有什么作用？ 
    2）vuex的工作流程：
      A）如何使用数据  B）走流程
    3）什么是单向数据流？
      state ==>  view  ==> action
      把走流程说清楚就OK了。
    4）vuex中有5大概念是什么，说一下mutaions和actions有什么？
    

 -->